import { RegisterPage } from "./root";
import * as React from "react";
import make from "../schema-factory.jsx";
import { connect } from "react-redux";
import { fetchDashboard } from "../../actions/dashboard";
import { Link } from "react-router";

const BannerCommpoent = make({
  bodyClassName: "",
  body: {
    type: "form",
    initApi: "/api/banner",
    api: "post:/api/banner",
    title: "首页Banner管理",
    controls: [
      {
        type: "combo",
        maxLength: 5,
        name: "banner",
        multiple: true,
        controls: [
          {
            type: "image",
            name: "photo",
            placeholder: "请选择尺寸为 750x528 的图片，或将满足尺寸的图片拖入框内",
            maxSize: 10 * 1024 * 1024,
            limit: {
              width: 750,
              height: 528
            }
          }
        ]
      }
    ]
  }
});

@connect(
  state => ({
    info: state.dashboard.data
  }),
  {
    fetchDashboard
  }
)
export class HomeRoute extends React.PureComponent {
  componentDidMount() {
    this.props.fetchDashboard();
  }

  render() {
    const info = this.props.info || {};
    const user = this.props.user;
    const can = this.props.can;
    const orgName = user.org && user.org.name ? user.org.name : '志多星';
    return (
      <div>
        <div className="bg-light lter b-b wrapper">
          <h1 className="m-n font-thin h3 text-black">管理首页</h1>
          <small className="text-muted">欢迎进入{orgName}管理后台</small>
        </div>
        <div className="wrapper">

        {can('notify:unverified') ? (
            <div>
              <div className="alert alert-warning">
                您的账号还未通过审核，请您耐心等待管理员审核。为了您更快的通过审核，请尽量<Link to="/user/team-settings">完善团队信息资料</Link>。
              </div>
            </div>
          ) : null}
        {can('notify:complete_info') ? (
            <div>
              <div className="alert alert-warning">
                您的账号信息不全，请您尽快<Link to="/user/team-settings">完善团队信息资料</Link>。
              </div>
            </div>
          ) : null}
        {can('notify:blacked') ? (
            <div>
              <div className="alert alert-warning">
              团队`{user.team.name}`已被管理员拉黑，不得使用{user.org.name}平台，该团队也不能发起新的项目，同时不展示在团队列表中
              </div>
            </div>
          ) : null}


          <div className="pull-in">
            <div className="hbox hbox-auto-xs">
              {user && (user.type == 4 || user.type == 5)? (
                <div className="col padder text-center">
                  <div className="panel padder-v item">
                    <div className="h1 text-info font-thin h1">
                      <Link to="/org/list">{info.org_count || 0}</Link>
                    </div>
                    <span className="text-muted text-xs">机构数</span>
                  </div>
                </div>
              ) : null}

              {can('team:create') || user.type == 5?(
                <div className="col padder text-center">
                  <div className="panel padder-v item">
                    <div className="h1 text-info font-thin h1">
                      <Link to="/team/list">{info.team_count || 0}</Link>
                    </div>
                    <span className="text-muted text-xs">团队数</span>
                  </div>
                </div>
              ) : null}

              {can('volunteer:list | volunteer:verify') ? (
                <div className="col padder text-center">
                  <div className="panel padder-v item">
                    <div className="h1 text-info font-thin h1">
                      <Link to={user.type == 2 ? '/volunteer/my' : '/volunteer/list'}>{info.volunteer_count || 0}</Link>
                    </div>
                    <span className="text-muted text-xs">志愿者数</span>
                  </div>
                </div>
              ) : null}
                {can('home:home') ? (
              <div className="col padder text-center">
                <div className="panel padder-v item">
                  <div className="h1 text-info font-thin h1">
                    <Link to="/project">{info.project_count || 0}</Link>
                  </div>
                  <span className="text-muted text-xs">项目数</span>
                </div>
              </div>
                ) : null}
                {can('home:home') ? (
              <div className="col padder text-center">
                <div className="panel padder-v item">
                  <div className="h1 text-info font-thin h1">
                    <span>{info.reward_count || 0}</span>
                  </div>
                  <span className="text-muted text-xs">志愿总时长</span>
                </div>
              </div>
                ) : null}
            </div>
          </div>

          <div className="pull-in">
            <div className="hbox hbox-auto-xs">
              {can('team:create') ? (
                <div className="col padder text-center">
                  <div className="panel padder-v item">
                    <div className="h1 text-info font-thin h1">
                      <Link to="/team/verify">
                        {info.pending_team_count || 0}
                      </Link>
                    </div>
                    <span className="text-muted text-xs">待审团队</span>
                  </div>
                </div>
              ) : null}

              {can('project:verify') ? (
                <div className="col padder text-center">
                  <div className="panel padder-v item">
                    <div className="h1 text-info font-thin h1">
                      <Link to="/project/verify">
                        {info.pending_project_count || 0}
                      </Link>
                    </div>
                    <span className="text-muted text-xs">待审项目</span>
                  </div>
                </div>
              ) : null}

              {can('volunteer:verify') ?  (
                <div className="col padder text-center">
                  <div className="panel padder-v item">
                    <div className="h1 text-info font-thin h1">
                      <Link to="/volunteer/verify">
                        {info.pending_volunteer_count || 0}
                      </Link>
                    </div>
                    <span className="text-muted text-xs">志愿者加入申请</span>
                  </div>
                </div>
              ) : null}

              {can('project:verify_reward_time') ? (
                <div className="col padder text-center">
                  <div className="panel padder-v item">
                    <div className="h1 text-info font-thin h1">
                      <Link to="/project/work">
                        {info.pending_reward_apply_count || 0}
                      </Link>
                    </div>
                    <span className="text-muted text-xs">补充时长申请</span>
                  </div>
                </div>
              ) : null}
            </div>
          </div>


        </div>
      </div>
    );
  }
}

RegisterPage({
  path: "home",
  label: "首页",
  icon: "glyphicon glyphicon-stats",
  url: "/home",
  component: HomeRoute
});
